<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机 - 魅族官网</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/goodsDetail.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1847150_v9171q41zjg.css">
    <script src='../js/require.js' async='true' defer data-main='../js/goodsDetail/main'></script>
</head>

<body>
    <!-- header -->
    <div class="header" id="header">
        <div class="w clearfix">
            <!-- logo -->
            <div class="logo fl">
                <a href="../index.html">
                    <h1>魅族</h1>
                    <img src="../images/index/header/logo.png" alt="">
                </a>
            </div>
            <!-- shopcar -->
            <div class="shopcar fr" id="shopCar">
                <a href="./goodsOrder.html">
                    <img src="../images/index/header/shopcar.png" alt="">
                </a>
                <div class="sub-shopcar" id="subShopcar">
                    <div class="sub-shopcar-content">
                        <img src="../images/index/header/shopcar-content.png" alt="">
                        <p class="sub-shopcar-content-text">
                            登录后可显示
                            <br>
                            您的账号中已加入的商品哦
                        </p>
                    </div>
                </div>
            </div>
            <!-- admin -->
            <div class="admin fr" id="admin">
                <a href="javascript:;" class="unlogin">
                    <img src="../images/index/header/admin.png" alt="">
                </a>
                <a href="javascript:;" class="user-img">
                    <img src="../images/index/header/user-img.png" alt="">
                </a>
                <!-- 登录/注册 -->
                <ul class="admin-list" id="adminList">
                    <li>
                        <a href="../html/login.html">立即登录</a>
                    </li>
                    <li>
                        <a href="../html/register.html">立即注册</a>
                    </li>
                    <li>
                        <a href="../html/goodsOrder.html">我的订单</a>
                    </li>
                    <li>
                        <a href="javascript:;">M码通道</a>
                    </li>
                </ul>
                <!-- 个人中心 -->
                <ul class="admin-list" id="userList">
                    <li>
                        <a href="javascript:;">个人中心</a>
                    </li>
                    <li>
                        <a href="../html/goodsOrder.html">我的订单</a>
                    </li>
                    <li>
                        <a href="javascript:;">M码通道</a>
                    </li>
                    <li id="logOut">
                        <a href="javascript:;">退出登录</a>
                    </li>
                </ul>
            </div>
            <!-- search -->
            <div class="search-box fr">
                <input type="text" class="search" placeholder="魅族 16T">
                <a href="javascript:;" class="search-icon">
                    <i class="iconfont icon-sousuo"></i>
                </a>
            </div>
            <!-- nav -->
            <div class="fr" id="navBox">
                <!-- nav -->
                <ul class="header-nav clearfix" id="headerNav">
                    <li class="headerNavSub"><a href="./goodsList.html">手机</a></li>
                    <li class="headerNavSub"><a href="javascript:;">声学</a></li>
                    <li class="headerNavSub"><a href="javascript:;">配件</a></li>
                    <li class="headerNavSub"><a href="javascript:;">生活</a></li>
                    <li class="noSub"><a href="javascript:;">Flyme</a></li>
                    <li class="noSub"><a href="javascript:;">服务</a></li>
                    <li class="noSub"><a href="javascript:;">专卖店</a></li>
                    <li class="noSub"><a href="javascript:;">社区</a></li>
                    <li class="noSub"><a href="javascript:;">政企定制</a></li>
                    <li class="noSub" id="app"><a href="javascript:;">APP下载</a></li>
                </ul>
                <!-- sub-nav -->
                <div class="sub-nav" id="subNav">
                    <div class="w clearfix">
                        <!-- phone -->
                        <ul class="sub-nav-list clearfix" id="subNavP">
                            <!-- <li>
                                <a href="javascript:;">
                                    <em></em>
                                    <p>【新品】魅族 17</p>
                                    <span>￥3699</span>
                                </a>
                            </li> -->
                        </ul>

                        <!-- music -->
                        <ul class="sub-nav-list clearfix" id="subNavM">
                            <!-- <li>
                                <a href="javascript:;">
                                    <em></em>
                                    <p>【新品】魅族 HD60 降噪耳机</p>
                                    <span>￥1099</span>
                                </a>
                            </li> -->
                        </ul>

                        <!-- other -->
                        <ul class="sub-nav-list clearfix" id="subNavO">
                            <!-- <li>
                                <a href="javascript:;">
                                    <em></em>
                                    <p>【新品】魅族无线超充板</p>
                                    <span>￥169</span>
                                </a>
                            </li> -->
                        </ul>

                        <!-- life -->
                        <ul class="sub-nav-list clearfix" id="subNavL">
                            <!-- <li>
                                <a href="javascript:;">
                                    <em></em>
                                    <p>【新品】Lifeme 双肩包</p>
                                    <span>￥169</span>
                                </a>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <!-- download-app -->
                <div class="download-app" id="downloadApp">
                    <img src="../images/index/header/app.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- container -->
    <div class="container">
        <!-- 固定头部导航条 -->
        <div class="fixed-nav" id="fixedNav">
            <div class="fixed-con w clearfix">
                <h2 class="fixed-name fl">
                    魅族 17
                </h2>
                <ul class="fixed-nav-list fr">
                    <li>
                        <a href="javascript:;">概述</a>
                    </li>
                    <li>
                        <a href="javascript:;">魅族 17 航母限定版</a>
                    </li>
                    <li>
                        <a href="javascript:;">参数</a>
                    </li>
                    <li>
                        <a href="javascript:;">换机指引</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 商品购买详情 -->
        <div class="item-detail w clearfix">
            <div class="item-img fl">
                <!-- 显示图 -->
                <div class="img-show" id="imgShow">
                    <a href="javascript:;">
                        <img src="../images/goodsDetail/item-img1.jpg" alt="">
                    </a>
                    <a href="javascript:;">
                        <img src="../images/goodsDetail/item-img2.jpg" alt="">
                    </a>
                    <a href="javascript:;">
                        <img src="../images/goodsDetail/item-img3.jpg" alt="">
                    </a>
                    <a href="javascript:;">
                        <img src="../images/goodsDetail/item-img4.jpg" alt="">
                    </a>
                    <!-- 放大镜工具 -->
                    <span class="tool" id="tool"></span>
                </div>
                <!-- 放大镜 -->
                <div class="img-big" id="imgBig">
                    <img src="../images/goodsDetail/item-img1.jpg" alt="">
                    <img src="../images/goodsDetail/item-img2.jpg" alt="">
                    <img src="../images/goodsDetail/item-img3.jpg" alt="">
                    <img src="../images/goodsDetail/item-img4.jpg" alt="">
                </div>
                <!-- 列表图 -->
                <ul class="img-list clearfix" id="imgList">
                    <li class="img-list-on">
                        <a href="javascript:;">
                            <img src="../images/goodsDetail/img-list1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/goodsDetail/img-list2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/goodsDetail/img-list3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../images/goodsDetail/img-list4.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <!-- 收藏/对比 -->
                <div class="collect">
                    <a href="javascript:;">
                        <i class="iconfont icon-shoucang"></i>
                        收藏
                    </a>
                    <a href="javascript:;">
                        <i class="iconfont icon-duibi"></i>
                        对比
                    </a>
                </div>
            </div>
            <div class="item-desc fr">
                <!-- 标题 -->
                <div class="desc-head">
                    <h4 class="desc-title">魅族 17</h4>
                    <p class="desc-txt">
                        【6月1日当天 限时享12期分期免息】mSmart 5G 快省稳系统方案 | 高通骁龙 865 + UFS 3.1 高速闪存 | 6400W 全场景影像系统 定制三星 Super AMOLED
                        90 帧直屏 | 4500mAh 超大电池
                    </p>
                </div>
                <!-- 价格 -->
                <div class="desc-price">
                    <h4 class="desc-num">
                        <span>￥</span>
                        <span class="desc-money">3699.00</span>
                    </h4>
                    <dl class="desc-add clearfix">
                        <dt>
                            <span>加价购</span>
                        </dt>
                        <dd>
                            <span>
                                另加29元起，即可换购超值商品
                            </span>
                            <a href="javascript:;">立即加购 ></a>
                        </dd>
                    </dl>
                </div>
                <!-- 服务 -->
                <div class="desc-service clearfix">
                    <dl class="ser-sup clearfix">
                        <dt class="stitle">
                            支
                            <span></span>
                            <span></span>
                            持
                        </dt>
                        <dd>
                            <span>
                                <i class="iconfont icon-gou"></i>
                                花呗分期
                            </span>
                            <span>
                                <i class="iconfont icon-gou"></i>
                                顺丰发货
                            </span>
                            <span>
                                <i class="iconfont icon-gou"></i>
                                7天无理由退货（具体查看详情）
                            </span>
                        </dd>
                    </dl>
                    <dl class="ser-area clearfix">
                        <dt class="stitle">
                            配送服务
                        </dt>
                        <div class="area-select">
                            <p>广东省 广州市 </p>
                            <i class="select-sub"></i>
                        </div>
                    </dl>
                    <p class="ser-area-call clearfix">
                        <span>
                            本商品由 魅族 负责发货并提供售后服务
                        </span>
                        <a href="javascript:;">
                            <i class="iconfont icon-kefu"></i>
                            <span>商城客服</span>
                        </a>
                    </p>
                </div>
                <!-- 型号 -->
                <div class="desc-type">
                    <dl class="type-list clearfix">
                        <dt class="stitle">
                            型
                            <span></span>
                            <span></span>
                            号
                        </dt>
                        <dd class="clearfix">
                            <a class="type-list-on" href="javascript:;">
                                魅族 17
                            </a>
                            <a href="javascript:;">
                                魅族 17 Pro
                            </a>
                            <a href="javascript:;">
                                魅族 16T
                            </a>
                            <a href="javascript:;">
                                魅族 17 航母限定版
                            </a>
                        </dd>
                    </dl>
                </div>
                <!-- 网络类型 -->
                <div class="desc-type">
                    <dl class="type-list clearfix">
                        <dt class="stitle">
                            网络类型
                        </dt>
                        <dd class="clearfix">
                            <a class="type-list-on" href="javascript:;">
                                全网通公开版
                            </a>
                        </dd>
                    </dl>
                </div>
                <!-- 颜色分类 -->
                <div class="desc-type">
                    <dl class="type-list clearfix">
                        <dt class="stitle">
                            颜色分类
                        </dt>
                        <dd class="clearfix">
                            <a href="javascript:;">
                                <img src="../images/goodsDetail/color1.png" alt="">
                                松深入墨
                            </a>
                            <a class="type-list-on" href="javascript:;">
                                <img src="../images/goodsDetail/color2.png" alt="">
                                十七度灰
                            </a>
                            <a href="javascript:;">
                                <img src="../images/goodsDetail/color3.png" alt="">
                                AG梦幻独角兽
                            </a>
                        </dd>
                    </dl>
                </div>
                <!-- 内存容量 -->
                <div class="desc-type">
                    <dl class="type-list clearfix">
                        <dt class="stitle">
                            内存容量
                        </dt>
                        <dd class="clearfix">
                            <a class="type-list-on" href="javascript:;">
                                8+128GB
                            </a>
                            <a href="javascript:;">
                                8+256GB
                            </a>
                        </dd>
                    </dl>
                </div>
                <!-- 选择套餐 -->
                <div class="desc-type">
                    <dl class="type-list clearfix">
                        <dt class="stitle">
                            选择套餐
                        </dt>
                        <dd class="clearfix">
                            <a class="type-list-on" href="javascript:;">
                                官方标配
                            </a>
                            <a href="javascript:;">
                                碎屏保套餐
                            </a>
                        </dd>
                    </dl>
                </div>
                <!-- 花呗分期 -->
                <div class="desc-type">
                    <dl class="type-list clearfix">
                        <dt class="stitle">
                            花呗分期
                            <i class="iconfont icon-wenhao"></i>
                        </dt>
                        <dd class="ant clearfix">
                            <a class="type-list-on" href="javascript:;">
                                <span>¥1233.00×3期</span>
                                <span class="free">免手续费</span>
                            </a>
                            <a href="javascript:;">
                                <span>¥1233.00×3期</span>
                                <span class="free">免手续费</span>
                            </a>
                        </dd>
                    </dl>
                </div>
                <!-- 数量/立即购买/加入购物车 -->
                <div class="buy-wrap">
                    <dl class="buy-num">
                        <dt class="stitle">
                            数
                            <span></span>
                            <span></span>
                            量
                        </dt>
                        <div class="add-sub">
                            <a class="sub" href="javascript:;">-</a>
                            <input type="text" value="1">
                            <a class="add" href="javascript:;">+</a>
                        </div>
                    </dl>
                    <div class="buy-btn">
                        <a href="javascript:;">立即购买</a>
                        <a class="addshopcar" href="javascript:;">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品图解 -->
        <div class="detail-img">
            <h3 class="detail-title w">
                商品详情
            </h3>
            <!-- 图解 -->
            <div class="img-more w">
                <img src="../images/goodsDetail/img1.jpg" alt="">
                <img src="../images/goodsDetail/img2.jpg" alt="">
                <img src="../images/goodsDetail/img3.jpg" alt="">
                <img src="../images/goodsDetail/img4.jpg" alt="">
                <img src="../images/goodsDetail/img5.jpg" alt="">
                <img src="../images/goodsDetail/img6.jpg" alt="">
                <img src="../images/goodsDetail/img7.jpg" alt="">
                <img src="../images/goodsDetail/img8.jpg" alt="">
                <img src="../images/goodsDetail/img9.jpg" alt="">
                <img src="../images/goodsDetail/img10.jpg" alt="">
                <img src="../images/goodsDetail/img11.jpg" alt="">
                <img src="../images/goodsDetail/img12.jpg" alt="">
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="footer-link w clearfix">
            <!-- 左 -->
            <ul class="footer-list">
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f1.png" alt="">
                        <span>满80免运费</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f2.png" alt="">
                        <span>100+ 城市次日送达</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f3.png" alt="">
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f4.png" alt="">
                        <span>15天换货保障</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f5.png" alt="">
                        <span>1年免费保修</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../images/index/footer/f6.png" alt="">
                        <span>上门快修</span>
                    </a>
                </li>
            </ul>
            <!-- 右 -->
            <div class="footer-hotline">
                <span>周一至周日 8:00-20:00</span>
                <p class="tel">400-788-3333</p>
                <a href="javascript:;">在线客服</a>
            </div>
            <hr class="footer-hr">
            <!-- 下 -->
            <div class="footer-bot">
                <div class="foot-bot-l">
                    <ul class="clearfix">
                        <li>
                            <a href="javascript:;">了解魅族</a>
                        </li>
                        <li>
                            <a href="javascript:;">加入我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">联系我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">Flyme</a>
                        </li>
                        <li>
                            <a href="javascript:;">魅族社区</a>
                        </li>
                        <li>
                            <a href="javascript:;">天猫旗舰店</a>
                        </li>
                        <li>
                            <a href="javascript:;">问题反馈</a>
                        </li>
                        <li>
                            <a href="javascript:;">线上销售授权名单公示</a>
                        </li>
                        <li>
                            <a href="javascript:;">出版物经营许可证</a>
                        </li>
                        <li class="lang no-border" id="lang">
                            <a href="javascript:;" id="langA">
                                <i class="lang-icon"></i>
                                简体中文
                            </a>
                            <div class="lang-sub" id="langSub">
                                <ul id="langSubList">
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang1"></i>
                                            <span>简体中文</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang2"></i>
                                            <span>繁體中文</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang3"></i>
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang4"></i>
                                            <span>Русский</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="lang5"></i>
                                            <span>Türkiye</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <p class="foot-bot-l-b">
                        ©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                        <a href="javascript:;">粤ICP备13003602号</a>
                        <a href="javascript:;">合字B2-20170010 </a>
                        <a href="javascript:;">营业执照</a>
                        <a href="javascript:;">法律声明</a>
                        <span class="record">
                            <i></i>
                            粤公网安备 44049102496009 号
                        </span>
                        <a href="javascript:;" class="f-icon1">
                            <i></i>
                        </a>
                        <a href="javascript:;" class="f-icon2">
                            <i></i>
                        </a>
                        <a href="javascript:;" class="f-icon3">
                            <i></i>
                        </a>
                    </p>
                </div>
                <div class="foot-bot-r">
                    <a href="javascript:;" id="applet">
                        <img src="../images/index/footer/applet.png" alt="">
                        <i class="share share1" id="share1"></i>
                    </a>
                    <a href="javascript:;" id="qrcode">
                        <img src="../images/index/footer/qrcode.jpg" alt="">
                        <i class="share share2"></i>
                    </a>
                    <a href="javascript:;">
                        <i class="share share3"></i>
                    </a>
                    <a href="javascript:;">
                        <i class="share share4"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>